<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的加息券列表</title>
    <link rel="stylesheet" type="text/css" href="./css/api.css" />
    <link rel="stylesheet" type="text/css" href="./css/aui.css" />
    <link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="./css/style.css" />
    <script type="text/javascript" src="./script/api.js"></script>
    <script type="text/javascript" src="./script/aui-tab.js" ></script>
    <link rel="stylesheet" type="text/css" href="./css/aui-slide.css" />
    <script type="text/javascript" src="./script/aui-slide.js"></script>
    <script type="text/javascript" src="./script/base.js"></script>
    <script type="text/javascript" src="./script/doT.min.js"></script>
    <script type="text/javascript">
        function closeWin(){
            api.closeWin({
            });
        };
    </script>
</head>
<body>
    <!-- 头部 -->
    <header class="aui-bar aui-bar-nav pos" id="topbar">
        <a class="aui-pull-left aui-btn" onclick="closeWin()">
            <span class="aui-iconfont aui-icon-left"></span>
        </a>
        <div class="aui-title">我的加息券</div>
    </header>
    <div class="header-d"></div>
    <div class="red-packet-list-t">
        <ul>
            <li id="notUse" class="active" onclick="notUse();">未使用</li>
            <li id="alreadyUse" onclick="alreadyUse();">已使用</li>
            <li id="expireUse" onclick="expireUse();">已过期</li>
        </ul>
    </div>
    <div id="list">
        <div class="red-packet-list">
            <ul class="red-packet-list-y">
                <li tapmode onclick="">
                    <div class="aui-col-xs-5">
                        额度加息券(年化)
                        <p>0.00%</p>
                    </div>
                    <div class="aui-col-xs-6">
                        <!-- <p>最低需投0.00元</p> -->
                        <p>有效期至0000-00-00 00:00:00</p>
                        <p>可适用于0个月及以上项目</p>
                    </div>
                    <div class="aui-col-xs-1">
                        <span class="fa fa-angle-right"></span>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
<script type="text/template" id="template">
    {{~it:value:index}}
    <div class="red-packet-list">
        <ul class="red-packet-list-y">
<!--             <li tapmode onclick="">
                <div class="aui-col-xs-5">
                    额度加息券(年化){{=value.begin_time}}
                    <p>{{=value.rate}}%</p>
                </div>
                <p>已用次数:{{=value.use_count}}</p>
                <p>可用次数:{{=value.use_limit}}</p>
                <div class="aui-col-xs-6">
                    <p>开始时间{{=value.begin_time}}</p>
                    <p>有效期至{{=value.end_time}}</p>
                    <p>可适用于1个月及以上项目</p>
                    <p>
                        {{? !value.use_content}}
                        无说明
                        {{?? }}
                        已使用说明{{=value.use_content}}
                        {{?}}
                    </p>
                </div>
                <div class="aui-col-xs-1">
                    <span class="fa fa-angle-right"></span>
                </div>
            </li> -->


            <li tapmode>
                <div class="red-packet-list-1">
                    <div class="aui-col-xs-6">
                        加息券
                        <p class="red">{{=value.rate}}%</p>
                    </div>
                    <div class="aui-col-xs-5">
                        <p>已用次数:{{=value.use_count}}</p>
                        <p>可用次数:{{=value.use_limit}}</p>
                    </div>
                </div>
                <div class="red-packet-list-2">
                    <p>开始时间:{{=value.begin_time}}</p>
                    <p>有效期至:{{=value.end_time}}</p>
                    <p>可适用于1个月及以上项目</p>
                    <p>
                        {{? !value.use_content}}
                        无说明
                        {{?? }}
                        已使用说明{{=value.use_content}}
                        {{?}}
                    </p>
                </div>
            </li>
        </ul>
    </div>
    {{~}}
</script>
<script type="text/javascript">

    apiready = function(){
        showProgress();
        updateData(1,0);
        // pullRefresh();
    }

    function updateData(reward,type){
        var userid = $api.getStorage('userid');
        typeVal = type;
        rewardVal = reward;
        api.ajax({
            url: webAddress + '/index.php?ctl=app_user_center&act=rewardlist',
            method: 'post',
            data: {
                values: {
                   id: userid,
                   type: type,
                   reward: reward,
               },
           }
       },function(ret, err){
        if (ret) {
            // var ret = $api.jsonToStr(ret);
            // alert(ret);
            // 关闭下拉刷新控件
            // api.refreshHeaderLoadDone();
            api.hideProgress();
            if (ret.status == 0) {
                alert(ret.info);
                return false;
            }else{
                var data = ret.reward;
                $api.setStorage('couponInfo', data);
                if (data == '') {
                    if (type == 0) {
                        var list = $api.byId('list');
                        list.innerHTML = '<div class="login-list-no">没有未使用的加息券</div>';
                    }else if(type == 1){
                        var list = $api.byId('list');
                        list.innerHTML = '<div class="login-list-no">没有已使用的加息券</div>';
                    }else{
                        var list = $api.byId('list');
                        list.innerHTML = '<div class="login-list-no">没有已过期的加息券</div>';
                    }
                }else{
                    templateFun(data);
                }
            }
        } else {
            alert(err.msg);
            // 关闭下拉刷新控件
            // api.refreshHeaderLoadDone();
            // 关闭加载状态控件
            api.hideProgress();
        }
    });
    }

    // 模板赋值函数
    function templateFun(data){

        for (var i = 0; i < data.length; i++) {
            if (data[i].end_time == 0) {
                data[i].end_time = " 无期限";
            }else{
                data[i].end_time = getDate(data[i].end_time);
            }
            if (data[i].begin_time == 0) {
                data[i].begin_time = " 未知";
            }else{
              data[i].begin_time = getDate(data[i].begin_time);
          }
      }

      var template = $api.byId('template');
      var dotFn = doT.template(template.innerHTML);
      var html = dotFn(data);
      var user = $api.byId('list');
      $api.html(user, html);
  }


    // // 红包详情
    // function red_packet(){
    //     var delay = 0;
    //     if(api.systemType != 'ios'){
    //         // delay = 300;
    //     }
    //     api.openWin({
    //         name: 'red_packet',
    //         url: './red-packet.html',
    //         bounces:false,
    //         delay: delay,
    //         slidBackEnabled:true,
    //         vScrollBarEnabled:false,
    //         progress:{
    //             type:"page"
    //         }
    //     });
    // };

    // 未使用
    function notUse(){
        showProgress();
        updateData(1,0);
        var notUse = $api.byId('notUse');
        var alreadyUse = $api.byId('alreadyUse');
        var expireUse = $api.byId('expireUse');
        $api.removeCls(alreadyUse, 'active');
        $api.removeCls(expireUse, 'active');
        $api.addCls(notUse, 'active');
    }

    // 已使用
    function alreadyUse(){
        showProgress();
        updateData(1,1);
        var notUse = $api.byId('notUse');
        var alreadyUse = $api.byId('alreadyUse');
        var expireUse = $api.byId('expireUse');
        $api.removeCls(notUse, 'active');
        $api.removeCls(expireUse, 'active');
        $api.addCls(alreadyUse, 'active');
    }

    // 已过期
    function expireUse(){
        showProgress();
        updateData(1,2);
        var notUse = $api.byId('notUse');
        var alreadyUse = $api.byId('alreadyUse');
        var expireUse = $api.byId('expireUse');
        $api.removeCls(notUse, 'active');
        $api.removeCls(alreadyUse, 'active');
        $api.addCls(expireUse, 'active');
    }

    // 下拉刷新
    function pullRefresh(){
        api.setRefreshHeaderInfo({
            // loadingImg: 'widget://image/refresh.png',
            bgColor: '#ccc',
            textColor: '#fff',
            textDown: '下拉刷新...',
            textUp: '松开刷新...'
        }, function(ret, err) {
            //在这里从服务器加载数据，加载完成后调用api.refreshHeaderLoadDone()方法恢复组件到默认状态
            updateData(rewardVal,typeVal);
        });
    }

    // 加载状态控件
    function showProgress(){
        api.showProgress({
            style: 'default',
            animationType: 'fade',
            title: '努力加载中...',
            text: '请稍后...',
            modal: false
        });
    }
</script>
</html>
